<template>
  <div class="newLeftMenu">
<!--    <div class="top">-->
<!--      <i class="iconfont icon-matou2"></i>-->
<!--    </div>-->
    <el-menu :default-active="$route.path"
             class="el-menu-vertical-demo"
             ref="menuInstance"
             @open="handleOpen"
             @select="linkTab"
             @close="handleClose">
<!--      v-if="userType.includes('船公司') || userType.includes('船代理') || userType.includes('货主') || userType.includes('货代')"-->
      <el-submenu index="1" >
        <template slot="title">船期计划</template>
        <el-menu-item index="/shipPlan/addBulk">件散货船期</el-menu-item>
        <el-menu-item index="/shipPlan/addContainer">集装箱船期</el-menu-item>
        <el-menu-item index="/shipPlan/loadList">装船清单</el-menu-item>
        <el-menu-item index="/shipPlan/unloadList">卸船清单</el-menu-item>
      </el-submenu>
<!--      v-if="userType.includes('货主') || userType.includes('货代')"-->
      <el-submenu index="2">
        <template slot="title">集装箱委托</template>
          <el-submenu index="21">
              <template slot="title">进提箱</template>
              <el-menu-item index="/heavyBox/heayBoxNum">提重箱</el-menu-item>
              <el-menu-item index="/heavyEmpty/heavyEmpty">提重返空</el-menu-item>
              <el-menu-item index="/emptyBox/emptyBoxNum">提空箱(指定箱号)</el-menu-item>
              <el-menu-item index="/heavyEmpty/emptyHeavyNum">提空返重(指定箱号)</el-menu-item>
              <el-menu-item index="/emptyBox/emptyBoxNoNum">提空箱(不指定箱号)</el-menu-item>
              <el-menu-item index="/heavyEmpty/emptyHeavyNoNum">提空返重(不指定箱号)</el-menu-item>
              <el-menu-item index="/heavyBox/heavyBox">进重箱</el-menu-item>
              <el-menu-item index="/emptyBox/emptyBox">进空箱</el-menu-item>
          </el-submenu>
          <el-submenu index="22">
              <template slot="title">拆装箱</template>
              <el-menu-item index="/unpacking/unpacking">拆箱</el-menu-item>
              <el-menu-item index="/unpacking/packingNum">装箱(指定箱号)</el-menu-item>
              <el-menu-item index="/unpacking/packingNoNum">装箱(不指定箱号)</el-menu-item>
          </el-submenu>
<!--          <el-menu-item index="/whiteCard/whiteCard">白卡办理</el-menu-item>-->
      </el-submenu>
<!--      v-if="userType.includes('运输公司') "-->
      <el-submenu index="3" >
        <template slot="title">件散货委托</template>
        <el-menu-item index="/goodContent/unloadLift">卸船直提</el-menu-item>
        <el-menu-item index="/goodContent/unloadIn">卸船入库</el-menu-item>
        <el-menu-item index="/goodContent/loadLift">装船直装</el-menu-item>
        <el-menu-item index="/goodContent/loadIn">装船出库</el-menu-item>
        <el-menu-item index="/goodContent/import">进货</el-menu-item>
        <el-menu-item index="/goodContent/output">提货</el-menu-item>
      </el-submenu>

    </el-menu>
  </div>

</template>

<script>
export default {
  name: 'newLeftMenu',
  computed:{
    userType(){
      return this.$store.getters.userType
    },
  },
  methods: {
    handleOpen(key, keyPath) {
        console.log(key, keyPath)
        // 避免打开的菜单过多
        let menuIndexs = ['1','2','3']
        for (var i = 0; i < menuIndexs.length; i++) {
            // 21 22 子菜单不控制
            if(key != menuIndexs[i] && key != '21' && key != '22'){
                console.log("关闭"+menuIndexs[i])
                // 调用 Menu 组件的 close 方法
                this.$refs.menuInstance.close(menuIndexs[i])
            }
        }
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath)
    },
    linkTab(e) {
        if(['/shipPlan/addBulk','/shipPlan/addContainer','/shipPlan/loadList','/shipPlan/unloadList'].includes(e)){
        if(this.userType.includes('船公司') || this.userType.includes('船代理') || this.userType.includes('货主') || this.userType.includes('货代')){
            this.$router.push(e)
        }else{
          this.$router.push({name:'noPermission2'})
        }
      }
      else if(['/goodContent/unloadLift','/goodContent/unloadIn','/goodContent/loadLift','/goodContent/loadIn',
        "/goodContent/import","/goodContent/output",'/heavyEmpty/heavyEmpty','/heavyEmpty/emptyHeavyNum','/heavyEmpty/emptyHeavyNoNum','/emptyBox/emptyBox',
        "/heavyBox/heavyBox","/heavyBox/heayBoxNum","/emptyBox/emptyBoxNum","/emptyBox/emptyBoxNoNum",
        "/unpacking/unpacking","/unpacking/packingNum","/unpacking/packingNoNum","/whiteCard/whiteCard",
      ].includes(e)){
        if(this.userType.includes('货主') || this.userType.includes('货代')){
          this.$router.push(e)
        }else{
          this.$router.push({name:'noPermission2'})
        }
      }
      else{
        this.$router.push({name:'noPermission2'})
      }

    },
  },
}
</script>

<style scoped lang="less">
/deep/.el-menu-item.is-active {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-submenu__title:hover {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-menu-item:hover {
  background-color: #0f47b8;
  color: white;
}
/deep/.el-menu {
  border-right: none;
}
.newLeftMenu {
  background-color: white;
  width: 200px;
  // min-height: 700px;
  height: 80%;
  // height: 80rem;
  //max-height: 1200px;
  //height: 1200px;
  overflow-y: auto;
  overflow-x: hidden;
  .top {
    width: 100%;
    height: 47px;
    background-color: #e4e4e4;
    display: flex;
    align-items: center;
    justify-content: center;
    i {
      font-size: 24px;
      color: rgba(119, 119, 119, 0.7);
    }
  }
}
</style>